<template>
    <div id="cont">
        <div id="loginBox">
            <img src="../assets/images/ClientImge/box_top.png" alt="" class="logo">
            <div class="user loginInput" :class="{ 'loginInputAc': userNameIsAc}">
                <input @keydown.enter="login" @blur="userNameBlur" @focus="userNameFocus" type="text" v-model="userName" class="loginINPUT">
                <p :class="{ 'focus': userNameIsAc}">学号/账号</p>
            </div>
            <div class="password loginInput" :class="{ 'loginInputAc': passWordIsAc}">
                <input @keydown.enter="login" @blur="passWordBlur" @focus="passWordFocus" type="password"
                       v-model="userPassWord">
                <p :class="{ 'focus': passWordIsAc}">用户密码</p>
            </div>
            <div id="buttons" class="clearfix">
                <button class="loginBtn" type="button" @click="login">登陆</button>
                <button @click="LogOut" class="signOutBtn" type="button">退出</button>
            </div>
        </div>

    </div>
</template>
<script type="text/ecmascript-6">
    import {mapGetters, mapActions, mapState} from 'vuex'
    import publicFUN from '../public'
    import Vue from 'vue'

    import store from '../store/'
    import axios from 'axios'
    export default {
        name: "",
        props: [],
        computed: {
            userName: {
                get () {
                    return this.$store.state.mutations.loginName
                },
                set (value) {
                    this.$store.commit('upLoginName', value)
                }
            },
            userPassWord: {
                get () {
                    return this.$store.state.mutations.loginPassWord
                },
                set (value) {
                    this.$store.commit('upLoginPassWord', value)
                }
            }
        },
        data () {
            return {
                userNameIsAc: false,
                passWordIsAc: false,
                sk: ''
            }
        },
        methods: {
            passWordFocus() {
                this.passWordIsAc = true
            },
            passWordBlur() {
                this.passWordIsAc = false
            },
            userNameFocus() {
                this.userNameIsAc = true
            },
            userNameBlur() {
                this.userNameIsAc = false
            },
            login(){
                var _this = this

                var loading = layer.load();

                this.$http.post('api/userinfo/login', {

                    username: store.state.mutations.loginName,
                    password: store.state.mutations.loginPassWord

                }).then(function (res) {

                    UserLogin(store.state.mutations.loginName)
                    ShowToolBar()
                    store.state.mutations.getToken = res.data.data.sk//获取并保存SK

                    document.cookie = 'getToken = ' + res.data.data.sk + ''//SK保存在cookie中
//图片路径地址
//                    window.picSrc = 'http://192.168.1.101:93';
//资源路径地址
//                    window.resourceURL = 'http://192.168.1.101:8084';

                    //获取webConfig地址
                    axios({
                        method: "GET",
                        url: 'api/Webconfig/GetWebConfigValue' + '?sk=' + store.state.mutations.getToken
                    }).then(function (res) {
                        console.log(res.data)
                        window.BaseDirectory = res.data.data.BaseDirectory;
                        window.picSrc = res.data.data.CloudSystem;
                        window.resourceURL = res.data.data.FileUrl;

                        store.state.mutations.picSrc = picSrc;
                        store.state.mutations.resourceURL = resourceURL;

                        window.ServerIP = res.data.data.ServerIP;//推题学生端serverIP
                        window.StudentPath = res.data.data.StudentPath;//学生端地址
                        window.TeacherControlPath = res.data.data.TeacherControlPath;//遥控器
                        window.TeacherRecord = res.data.data.TeacherRecord;//教室行为采集
                    })


                    if (res.data.message === '登陆成功！') {

                        layer.msg('登陆成功', {icon: 1})

                        setTimeout(function () {

                            _this.$router.push('/home/XB')
                            setTimeout(function () {

                                layer.close(loading);

                                //登陆成功后获取用户信息
                                Vue.prototype.$http.get(('api/userinfo/current?sk=' + store.state.mutations.getToken)).then(function (res) {
                                    store.state.mutations.USERINFO = res.data.data
                                })
                                //登陆成功后获取班级信息
                                Vue.prototype.$http.get(('api/classinfo/myclass?sk=' + store.state.mutations.getToken)).then(function (res) {
                                    store.state.mutations.myClass = res.data.data
                                })
                                //登陆成功后获取当前老师教材
                                Vue.prototype.$http.get(('api/teachingmaterial/myine?sk=' + store.state.mutations.getToken)).then(function (res) {
                                    store.state.mutations.teachingmaterial = res.data.data
                                    setTimeout(function () {
                                        document.querySelector('.TextBookList ul').getElementsByTagName('li')[0].setAttribute('class', 'confirmTextBook');
                                        //登陆后默认选中第一个教材
                                        store.state.mutations.configJIAOCAI.JIAOCAI = document.querySelector('.TextBookList ul').getElementsByTagName('li')[0].innerHTML;
                                        //默认选中第一个教材之后设置当前教材ID便于直接选择章节
                                        store.state.mutations.confirmTextBookID = document.querySelector('.TextBookList ul').getElementsByTagName('li')[0].getAttribute('data-id')
                                    }, 100)
                                })

                                setInterval(function () {
                                    //每8分钟更新一次sk
                                    Vue.prototype.$http.get(('api/auth/update?sk=' + store.state.mutations.getToken)).then(function (res) {
                                        document.cookie = 'getToken = ' + res.data.data + ''
                                        store.state.mutations.getToken = publicFUN.getCookie('getToken')
                                    })
                                }, 48000)

                                //                        router.push('/home/XB')
                            }, 10)
                        }, 500)
                    } else {
                        layer.msg('用户名或密码错误', {icon: 2})
                    }
                })
            },
            ...mapActions([
                //'login' // 映射 this.increment() 为 this.$store.dispatch('increment')
            ]),
            LogOut(){
                QuitApp()
            }
        },
        mounted(){
//            var _this = this;
            $('.loginINPUT').focus()
            this.userNameFocus()
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    #cont {
        background: url("../assets/images/ClientImge/body_bg.jpg") no-repeat;
        background-size: cover;
        height: 100%;
        #loginBox {
            position: fixed;
            top: 0;
            bottom: 0;
            right: 10%;
            margin: auto;
            width: 328px;
            height: 380px;
            border: 1px solid rgba(78, 78, 78, 0.6);
            border-radius: 6px;
            background: #fff;
            input {
                color: #999;
                font-size: 12px;
            }
        }
        #loginBox #buttons {
            width: 328px;
            height: 54px;
        }
        #loginBox #buttons button {
            float: left;
            background: red;
            width: 88px;
            height: 44px;
            margin: 10px 37px;
            font-weight: bold;
            color: #cccccc;
            border: 1px solid #666666;
            box-shadow: 3px 3px 5px #888888;
            font-family: "微软雅黑", "黑体", "宋体";
            font-size: 24px;
            text-shadow: 0px 0px 10px #666;
            outline: none;
        }
        #loginBox #buttons button:active {
            position: relative;
            left: 1px;
            top: 1px;
        }
        #loginBox #buttons .loginBtn:active {
            background-image: -webkit-linear-gradient(top, #48a7cc 0%, #2a4f88 100%);
        }
        #loginBox #buttons .loginBtn {
            background-image: -webkit-linear-gradient(top, #ccc 0%, #888 100%);
        }
        #loginBox #buttons .signOutBtn {
            background-image: -webkit-linear-gradient(top, #48a7cc 0%, #2a4f88 100%);
        }
        .loginInput {
            width: 240px;
            height: 40px;
            margin: 20px 43px;
            border: 1px solid #ccc;
            border-radius: 15px;
            backgroundColor: rgb(250, 255, 189);
            position: relative;
        }
        .loginInputAc {
            border: 1px solid #4a97cc;
        }
        .loginInput input {
            border: 0;
            width: 240px;
            height: 40px;
            line-height: 40px;
            border-radius: 15px;
            outline: none;
            text-align: center;
        }
        .loginInput p {
            position: absolute;
            color: #aaa;
            font-size: 16px;
            left: 20px;
            top: 12px;
            background: #ffffff;
            transition: .2s;
        }

        .loginInput p.focus {
            top: -9px;
            font-size: 14px;
            color: #4a97cc;
            transition: .2s;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity 10s
        }
        .fade-enter, .fade-leave-active {
            transition: opacity 10s
        }
    }
</style>